<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采购标段信息表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.5;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .header h1 {
            font-size: 18px;
            font-weight: bold;
        }

        .filter-section {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }

        .filter-item {
            display: flex;
            flex-direction: column;
            margin-right: 50px;
            margin-bottom: 10px;
            width: 150px;
        }

        .filter-item label {
            margin-bottom: 5px;
            font-size: 14px;
            color: #666;
            font-weight: normal;
        }

        .filter-item input,
        .filter-item select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
        }

        .date-filter {
            display: flex;
            align-items: center;
            width: 320px;
        }

        .date-filter input {
            width: 140px;
            margin-right: 5px;
        }

        .range-filter {
            display: flex;
            align-items: center;
            width: 180px;
        }

        .range-filter input:first-child {
            width: 60px;
            margin-right: 5px;
        }

        .range-filter input:last-child {
            width: 60px;
            margin-left: 5px;
        }

        .range-filter span {
            margin: 0 5px;
        }

        .button-group {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 15px;
        }

        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
            font-size: 14px;
        }

        .btn-primary {
            background-color: #f0ad4e;
            color: white;
        }

        .btn-default {
            background-color: #fff;
            border: 1px solid #ddd;
            color: #333;
        }

        .btn-new {
            background-color: #f0ad4e;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            padding: 8px 15px;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .table-container {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        thead {
            background-color: #f9f9f9;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
            font-size: 13px;
        }

        th {
            font-weight: bold;
            color: #333;
            white-space: nowrap;
        }

        td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }

        .page-info {
            font-size: 14px;
            color: #666;
        }

        .pagination {
            display: flex;
            align-items: center;
        }

        .pagination a, .pagination span {
            display: inline-block;
            padding: 5px 10px;
            margin: 0 3px;
            border: 1px solid #ddd;
            border-radius: 3px;
            text-decoration: none;
            color: #333;
            font-size: 12px;
        }

        .pagination .active {
            background-color: #f0ad4e;
            color: white;
            border-color: #f0ad4e;
        }

        .pagination .disabled {
            color: #ccc;
        }

        .status-tag {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 5px;
            color: white;
        }

        .tag-blue {
            background-color: #5bc0de;
        }

        .tag-green {
            background-color: #5cb85c;
        }

        .avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
            vertical-align: middle;
            background-color: #ddd;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #666;
        }

        .action-link {
            color: #337ab7;
            text-decoration: none;
            cursor: pointer;
            font-size: 12px;
        }

        .header-buttons {
            display: flex;
            align-items: center;
        }

        .header-button {
            margin-left: 10px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>采购标段信息表</h1>
    </div>

    <div class="filter-section">
        <div class="filter-item">
            <label>姓名</label>
            <input type="text" placeholder="请输入">
        </div>
        <div class="filter-item">
            <label></label>
            <div style="text-align: right;">
                <button class="btn btn-primary">查询</button>
                <button class="btn btn-default">重置</button>
            </div>
        </div>
    </div>

    <div class="table-container">
        <table>
            <thead>
            <tr>
                <th style="width: 40px;"><input type="checkbox"></th>
                <th>姓名</th>
                <th>人员Id</th>
                <th>手机号</th>
                <th>公司</th>
                <th>工号</th>
                <th>帐号</th>
                <th>工作状态</th>
                <th>手机号码</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user: ${users}">
                <td><input type="checkbox"></td>
                <td th:text="${user.username}"></td>
                <td th:text="${user.id}"></td>
                <td th:text="${user.phone }"></td>
                <td th:text="${user.userNumber }"></td>
                <td th:text="${user.workStatus}"></td>
                <td th:text="${user.exitStatus}"></td>
                <td th:text="${user.accountType}"></td>
                <td th:text="${user.account}"></td>
                <td><a class="action-link">打开</a></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="table-footer">
        <div class="page-info" th:text="'共 ' + ${usercount} + ' 条'"></div>
        <div class="pagination">
            <!-- 上一页 -->
            <a th:href="@{/practice/user/userList(pageNumber=${currentPage > 1 ? currentPage - 1 : 1}, name=${name})}"
               th:class="${currentPage == 1} ? 'disabled' : ''">
                &lt;
            </a>

            <!-- 动态页码 -->
            <th:block th:with="totalPages=${(usercount + 9) div 10}">  <!-- 计算总页数 -->
                <th:block th:each="page : ${#numbers.sequence(1, totalPages)}">
                    <a th:if="${page != currentPage}"
                       th:href="@{/practice/user/userList(pageNumber=${page}, name=${name})}"
                       th:text="${page}"></a>
                    <span th:if="${page == currentPage}"
                          class="active"
                          th:text="${page}"></span>
                </th:block>
            </th:block>

            <!-- 下一页 -->
            <a th:href="@{/practice/user/userList(pageNumber=${currentPage + 1}, name=${name})}"
               th:class="${currentPage == totalPages} ? 'disabled' : ''">
                &gt;
            </a>

            <span>10条/页</span>
        </div>
    </div>

</div>

<script>
    // 筛选功能
    document.querySelector('.btn-primary').addEventListener('click', function() {
        // 获取查询条件
        const name = document.querySelector('.filter-item input[type="text"]').value;

        // 构建查询URL（保留当前分页参数）
        const queryParams = new URLSearchParams({
            name: name,
            pageNumber: 1 // 查询时重置到第一页
        });

        // 跳转到新URL
        window.location.href = `/practice/user/userList?${queryParams.toString()}`;
    });

    // 重置功能
    document.querySelector('.btn-default').addEventListener('click', function() {
        // 清空输入框
        document.querySelector('.filter-item input[type="text"]').value = '';

        // 重置后跳转到第一页
        window.location.href = '/practice/user/userList?pageNumber=1';
    });

    // 新增功能
    document.querySelector('.btn-new').addEventListener('click', function() {
        alert('新增功能已触发');
        // 这里可以添加实际的新增逻辑
    });

    // 打开操作
    document.querySelectorAll('.action-link').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            alert('打开操作已触发');
            // 这里可以添加实际的打开逻辑
        });
    });

    // 全选功能
    document.querySelector('thead input[type="checkbox"]').addEventListener('change', function() {
        var isChecked = this.checked;
        document.querySelectorAll('tbody input[type="checkbox"]').forEach(function(checkbox) {
            checkbox.checked = isChecked;
        });
    });
</script>
</body>
</html>
